<template>
    <view>
        <!-- 客户信息 -->
        <view class="client-box">
            <minMaxClose ref="minMaxClose"></minMaxClose>
            <view
                class="client-info"
                @mousedown="mousedown"
                @dblclick="onDbClickHandler"
                v-show="!isNotData"
            >
                <view class="client-img">
                    <image
                        :src="
                            customer_info && customer_info.avatar
                                ? customer_info.avatar
                                : userDefault
                        "
                        mode="scaleToFill"
                    ></image>
                </view>
                <view class="info-r">
                    <view class="info-a">
                        <view class="a-uname"
                            >{{
                                customer_info && customer_info.name
                                    ? " " + customer_info.name
                                    : md == 3
                                    ? "散客"
                                    : "暂无供应商"
                            }}
                        </view>
                        <view class="a-cpname">
                            {{
                                customer_info && customer_info.company
                                    ? " " + customer_info.company
                                    : " "
                            }}</view
                        >
                    </view>
                    <view
                        class="info-b"
                        v-if="
                            (customer_info && customer_info.company) || address
                        "
                    >
                        <text class="b-adress"
                            >{{
                                address && address.district
                                    ? address.district + " - "
                                    : " "
                            }}{{
                                address && address.address
                                    ? address.address + " - "
                                    : " "
                            }}{{
                                address && address.addressee
                                    ? " " + address.addressee
                                    : " "
                            }}</text
                        >
                        <!-- <text class="b-name">{{
                            orderInfoData && orderInfoData.uname_cp
                                ? " " + orderInfoData.uname_cp
                                : " "
                        }}</text> -->
                        <text class="b-phone">{{
                            address && address.cellphone
                                ? " " + address.cellphone
                                : " "
                        }}</text>
                        <text
                            class="b-clipboard copy-link"
                            :data-clipboard-text="`${
                                customer_info && customer_info.name
                                    ? customer_info.name + ' '
                                    : ''
                            }${
                                customer_info && customer_info.company
                                    ? customer_info.company
                                    : ''
                            } - ${
                                address && address.district
                                    ? address.district
                                    : ''
                            },${
                                address && address.address
                                    ? address.address
                                    : ''
                            } ${
                                address && address.addressee
                                    ? address.addressee
                                    : ''
                            } ${
                                address && address.cellphone
                                    ? address.cellphone
                                    : ''
                            }`"
                            @click="copyInformation"
                            >复制</text
                        >
                    </view>
                    <view class="info-b">
                        <text
                            class="b-ogistics"
                            v-if="
                                orderInfoData.kuaidi_info &&
                                orderInfoData.kuaidi_info.num > 0
                            "
                            @click="ogisticsFun"
                            >查看物流({{ orderInfoData.kuaidi_info.num }})</text
                        >
                    </view>
                </view>
                <view class="info-more">
                    <view class="more-icon" @click="onInfoMore">
                        <image src="../../static/images/c-more.png"></image>
                    </view>
                </view>
            </view>
            <!-- 订单号信息 -->
            <view class="order-info" v-show="!isNotData">
                <view class="order-shop">
                    <view class="order-no"
                        >单号 :
                        <text>{{
                            orderInfoData && orderInfoData.no
                                ? " " + orderInfoData.no
                                : " 暂无单号"
                        }}</text>
                        <text class="o-status-txt">{{
                            orderInfoData &&
                            orderInfoData.status_act &&
                            orderInfoData.status_act.status_rt_txt
                                ? orderInfoData.status_act.status_rt_txt
                                : ""
                        }}</text>
                        <text
                            class="icon-font refuse-btn"
                            v-if="orderInfoData && orderInfoData.ask_rt"
                            @click="onConsult"
                            >协商记录<text class="icon-font icon-style"
                                >&#xe600;</text
                            ></text
                        >
                    </view>
                    <!-- 					<view class="refuse-btn" v-if="orderInfoData.ask_rt" @click="onConsult">协商记录<text class="icon-font" >&#xe600;</text></view>
 -->
                    <view class="order-time"
                        >经手人 :
                        <text>{{
                            orderInfoData && orderInfoData.uname_cp
                                ? " " + orderInfoData.uname_cp
                                : "  无"
                        }}</text></view
                    >
                    <view class="order-time"
                        >时间 :
                        <text>{{
                            orderInfoData && orderInfoData.atime_txt
                                ? " " + orderInfoData.atime_txt
                                : " 无"
                        }}</text></view
                    >
                    <view class="order-time"></view>
                </view>
                <view class="order-shop">
                    <view class="o-s-a"
                        >订单 :
                        <text>{{
                            orderInfoData &&
                            orderInfoData.status_act &&
                            orderInfoData.status_act.status_txt
                                ? " " + orderInfoData.status_act.status_txt
                                : " 无"
                        }}</text></view
                    >
                    <view class="o-s-a"
                        >支付 :
                        <text>{{
                            orderInfoData &&
                            orderInfoData.status_act &&
                            orderInfoData.status_act.status_pay_txt
                                ? " " + orderInfoData.status_act.status_pay_txt
                                : " 无"
                        }}</text></view
                    >
                    <view class="o-s-a"
                        >配送 :
                        <text>{{
                            orderInfoData &&
                            orderInfoData.status_act &&
                            orderInfoData.shipp_title
                                ? " " + orderInfoData.shipp_title
                                : " 无"
                        }}</text></view
                    >
                    <view class="o-s-a"
                        >仓库 :
                        <text>{{
                            orderInfoData &&
                            orderInfoData.status_act &&
                            orderInfoData.status_act.status_send_txt
                                ? " " + orderInfoData.status_act.status_send_txt
                                : " 无"
                        }}</text></view
                    >
                </view>
                <view class="order-shop">
                    <view class="b-closed" v-if="md == 4"
                        >应收 :
                        <text>{{
                            orderInfoData && orderInfoData.amount_all
                                ? " " + orderInfoData.amount_all
                                : " 无"
                        }}</text></view
                    >
                    <view class="b-closed" v-else-if="md == 6"
                        >应付 :
                        <text>{{
                            orderInfoData && orderInfoData.amount_pay
                                ? " " + orderInfoData.amount_pay
                                : " 无"
                        }}</text></view
                    >
                    <view class="b-owe"
                        >欠款 :
                        <text>{{
                            orderInfoData && orderInfoData.amount_notpay
                                ? " " + orderInfoData.amount_notpay
                                : " 无"
                        }}</text></view
                    >
                    <view class="b-sale"
                        >优惠 :
                        <text>{{
                            orderInfoData && orderInfoData.discount
                                ? " " + orderInfoData.discount
                                : " 无"
                        }}</text></view
                    >
                    <view class="b-num"
                        >总量 :
                        <text>{{
                            orderInfoData && orderInfoData.number
                                ? " " + orderInfoData.number
                                : " 无"
                        }}</text></view
                    >
                </view>
                <view class="order-shop order-shop-0">
                    <view class="o-s-a"
                        >运费 : <text>{{ " " + setShippType }}</text></view
                    >
                    <view
                        class="order-no order-no-cursor icon-font icon-style"
                        @click="feeInfo"
                        >费用共:
                        <text class="fee-txt"
                            >{{
                                orderInfoData && orderInfoData.fee_total
                                    ? " " + orderInfoData.fee_total + " "
                                    : " "
                            }}{{
                                orderInfoData &&
                                orderInfoData.fee_info &&
                                orderInfoData.fee_info.fee_ls
                                    ? " 共" +
                                      orderInfoData.fee_info.fee_ls.length +
                                      "项 "
                                    : "0"
                            }}
                            {{
                                orderInfoData &&
                                orderInfoData.amount_fee &&
                                orderInfoData.amount_fee > 0
                                    ? "应收增加 " +
                                      orderInfoData.amount_fee +
                                      " &#xe600;"
                                    : orderInfoData &&
                                      orderInfoData.amount_fee &&
                                      orderInfoData.amount_fee < 0
                                    ? "应收减少 " +
                                      orderInfoData.amount_fee +
                                      " &#xe600;"
                                    : " "
                            }}</text
                        ></view
                    >
                    <view class="b-sale"
                        >折扣 :
                        <text>{{
                            orderInfoData && orderInfoData.discount_r
                                ? " " + orderInfoData.discount_r + "%"
                                : " 无"
                        }}</text></view
                    >

                    <view class="b-num"
                        >{{orderInfoData.type == 1? '收款方式':'退款方式'  }} :
                        <text>{{
                            orderInfoData && orderInfoData.pay_title
                                ? " " + orderInfoData.pay_title
                                : " 无"
                        }}</text></view
                    >
                </view>
                <view class="order-shop">
                    <view class="b-sale"
                        >消费券 :
                        <text>{{
                            orderInfoData && orderInfoData.money_q
                                ? " " + orderInfoData.money_q
                                : " 无"
                        }}</text></view
                    >
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import windBtnContrl from "../../js/WinBtnContrl.js";
import minMaxClose from "../min-max-close.vue";
import Clipboard from "clipboard";

export default {
    components: { minMaxClose },
    props: [
        "md",
        "orderInfoData",
        "customer_info",
        "address",
        "setShippType",
        "isNotData",
    ],
    data() {
        return {
            userDefault: staticConst.DEFAULT_IMG,
        };
    },
    methods: {
        ogisticsFun() {
            this.$emit("ogisticsFun");
        },
        copyInformation() {
            const clipboard = new Clipboard(".copy-link");
            clipboard.on("success", (e) => {
                // 释放内存
                this.$msg({ title: `已复制${e.text}` });
                clipboard.destroy();
            });
            clipboard.on("error", (e) => {
                // 不支持复制
                this.$msg({ title: "该浏览器不支持复制" });
                // 释放内存
                clipboard.destroy();
            });
        },
        feeInfo() {
            if (this.orderInfoData && this.orderInfoData.fee_total > 0) {
                this.$emit("feeInfo");
            }
        },

        onInfoMore() {
            console.log("click info more!!!");
            this.$emit("showCustmInfo");
        },

        onDbClickHandler() {
            console.log("双击！！！！");
            // alert("aa")
            this.$refs.minMaxClose.changeMax();
        },

        /*** 点击协商记录 ***/
        onConsult() {
            this.$emit("openConsult");
        },

        /***移动窗口***/
        mousedown() {
            windBtnContrl.mousedown();
        },
    },
};
</script>

<style lang="scss">
.client-box {
    // padding:10px 0px 10px 10px;
    background: #fff;
    border-bottom: 1px solid #ececec;
    position: relative;
    .client-info {
        height: 110px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        .client-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .info-r {
            flex: 1;
            padding-left: 10px;
            display: flex;
            .info-a {
                display: flex;
                align-items: center;
                view {
                    font-size: 14px;
                    color: #333;
                    line-height: 20px;
                }
                .a-uname {
                    margin-right: 10px;
                }
            }

            .info-b {
                // display: flex;
                // align-items: center;
                .b-adress {
                    margin-left: 10px;
                }
                text {
                    font-size: 12px;
                    color: #999;
                    line-height: 20px;
                    padding-right: 10px;
                }
                .b-clipboard {
                    border: 1px #f1f3f4 solid;
                    border-radius: 3px;
                    padding: 5px;
                    color: #3989fc;
                    cursor: pointer;
                    &:hover {
                        background: #ecf5ff;
                    }
                }
                .b-ogistics {
                    border: 1px #f1f3f4 solid;
                    border-radius: 3px;
                    padding: 5px;
                    margin-left: 10px;
                    color: #3989fc;
                    cursor: pointer;
                    &:hover {
                        background: #ecf5ff;
                    }
                }
            }
        }
        .info-more {
            padding-right: 10px;
            padding-left: 10px;
            .more-icon {
                width: 24px;
                height: 24px;
                cursor: pointer;
                padding: 3px;
                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .more-icon:hover {
                background-color: #eee;
                opacity: 0.9;
            }
            .more-icon:active {
                background-color: #ddd;
                opacity: 0.8;
            }
        }
    }
    .order-info {
        padding: 10px 20px;
        border-top: 1px solid #ececec;
        .order-no,
        .order-time {
            font-size: 12px;
            flex: 1;
            color: #999;
            text {
                color: #333;
            }
            .o-status-txt {
                padding: 0 10px;
                color: red;
            }
        }

        .order-no-cursor {
            cursor: pointer;
            padding-left: 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .order-no-cursor:hover {
            opacity: 0.8;
        }

        .refuse-btn {
            color: #3388ff !important;
            font-size: 12px;
            cursor: pointer;
            text-decoration: underline;
            .icon-style {
                color: #3388ff !important;
            }
        }
        .order-shop {
            display: flex;
            view {
                font-size: 12px;
                line-height: 20px;
                // padding-right: 10px;
            }
            .o-s-a {
                color: #999;
                font-size: 12px;
                width: 25%;
                text {
                    color: #3388ff;
                }
            }

            .b-closed {
                color: #999;
                font-size: 12px;
                width: 25%;
                text {
                    color: red;
                }
            }
            .b-owe {
                color: #999;
                font-size: 12px;
                width: 25%;
                text {
                    color: red;
                }
            }
            .b-sale {
                color: #999;
                font-size: 12px;
                width: 25%;
                text {
                    color: #66cc02;
                }
            }
            .b-num {
                color: #999;
                font-size: 12px;
                width: 25%;
                text {
                    color: #333;
                }
            }
            .o-s-m {
                color: #999;
                font-size: 12px;
                width: 25%;
                text {
                    color: #333;
                }
            }

            .b-z {
                color: #999;
                font-size: 12px;
                .b-z-t-l {
                    color: #3388ff;
                    cursor: pointer;
                }
            }
            .fee-txt {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .order-shop-0 {
            padding-right: 0px;
        }
    }
}
</style>
